<template>
    <div>
        <div class="crumbs">
            <div class="container">
                <el-form ref="form" :model="form" :rules="rules" label-width="130px">

                 <div class="lu hnk"></div><div class="hnk jgxx">企业信息</div>
                 <div class="jgcontainer">
                    <!-- <div class="hnk con"> -->
                        <!-- <el-form ref="form" :model="form" label-width="80px"> -->
                    <el-row  style="margin-top:20px;">
                            <el-col :span="10" >
								<el-form-item label="企业简称" prop="abbreviation">
								<el-input class="handle-input" placeholder="追溯码上展示，不得超过6个字" v-model="form.abbreviation"></el-input>
								</el-form-item>
								<el-form-item label="所在区域：" prop="area">
									<el-cascader size="large" :options="options" style="width:300px" v-model="form.area" ></el-cascader>
								</el-form-item>

								<el-form-item label="营业执照：">
									<el-upload
										class="upload-poster"
											action="https://jsonplaceholder.typicode.com/posts/"
											:show-file-list="false"
											:on-change="imgPreview"
											:auto-upload="false">
											<img v-if="logoImg" :src="logoImg" class="avatar">
											<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>

								</el-form-item>
                            </el-col>

                        	<el-col :span="14">
								<el-form-item label="企业名称" prop="name">
									<el-input class="handle-input" placeholder="企业全称" v-model="form.name"></el-input>
								</el-form-item>

								<el-form-item label="统一社会信用代码" prop="creditCode">
									<el-input class="handle-input" placeholder="请输入统一社会信用代码" v-model="form.creditCode"></el-input>
								</el-form-item>
								<el-form-item label="注册地址" prop="region">
									<el-input class="handle-input" placeholder="请填写详细注册地址" v-model="form.region"></el-input>
								</el-form-item>

								<!--<el-form-item label="营业期限：">
									<el-date-picker
										value-format="yyyy/MM/dd"
										format="yyyy/MM/dd"
										style="width:300px"
										v-model="value1"
										type="daterange"
										:disabled="disabled1"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>

									<el-checkbox style="margin-left:10px;" v-model="checked1" @change="changeState1">长期</el-checkbox>
								</el-form-item> -->
								<el-form-item label="营业期限">
									<el-col :span="5">
										<el-date-picker  type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd" placeholder="选择日期" :disabled="disabled" v-model="date1" style="width: 100%;"></el-date-picker>
									</el-col>
									<el-col class="line" :span="1" style="margin-left:10px;">至</el-col>
									<el-col :span="5">
										<el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled" v-model="date2" style="width: 100%;"></el-date-picker>
									</el-col>
									<el-col :span="4" style="margin-left:5px;">
										<el-checkbox v-model="checked1" @change="changeState1">长期</el-checkbox>
									</el-col>
								</el-form-item>
								<el-form-item label="果园类型">
								<el-select v-model="ruleForm.fruitType" placeholder="请选择分类">
									<el-option label="普通果园" value="普通果园"></el-option>
									<el-option label="智慧果园" value="智慧果园"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="果园组织类型">
								<el-select v-model="ruleForm.compType" placeholder="请选择分类">
									<el-option label="公司" value="公司"></el-option>
									<el-option label="合作社" value="合作社"></el-option>
									<el-option label="私人" value="私人"></el-option>
								</el-select>
							</el-form-item>

                    		</el-col>
                    </el-row>

                    <div style="height:1px; background:#E4E7ED;width:100%;"></div>
                    <div style="margin-top:20px;">
                        <div class="lu hnk"></div><div class="hnk jgxx">法人信息</div>
                    </div>
					<el-row class="demo-ruleForm">
						<el-col :span="10">
							<el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang1" :maxNum="1" :files='listUrl1' style="width:300px"></upload-img>
							</el-form-item>
							<el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang2" :maxNum="1" :files='listUrl2' style="width:300px"></upload-img>
							</el-form-item>
						</el-col>
						<el-col :span="14">

							<el-form-item label="法人代表：">
								<el-input v-model="form.legalName" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="身份证号：">
								<el-input v-model="form.legalID" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="证件有效期">
								<el-col :span="5">
									<el-date-picker  type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled" v-model="date3" style="width: 100%;"></el-date-picker>
								</el-col>
								<el-col class="line" style="margin-left:10px;" :span="1">至</el-col>
								<el-col :span="5">
									<el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled" v-model="date4" style="width: 100%;"></el-date-picker>
								</el-col>
								<el-col :span="4" style="margin-left:5px;">
									<el-checkbox v-model="checked2" @change="changeState2">长期</el-checkbox>
								</el-col>
                        	</el-form-item>
							<el-form-item label="手机号：" style="width:500px">
								<el-input v-model="form.legalPhone" style="width:300px"></el-input>
							</el-form-item>

						</el-col>
					</el-row>

                    <!-- </el-form> -->

                    <div style="height:1px; background:#E4E7ED;width:100%;"></div>
                    <div style="margin-top:20px;">
                        <div class="lu hnk"></div><div class="hnk jgxx">运营者信息</div>
                    </div>
					<el-row class="demo-ruleForm">
						<el-col :span="10">
							<el-form-item label="身份证照片：（人像面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang3" :maxNum="1" :files='listUrl3' style="width:300px"></upload-img>
							</el-form-item>
							<el-form-item label="身份证照片：（国徽面）" label-width="100px" style="margin-left:35px;">
								<upload-img ref="uploadChang4" :maxNum="1" :files='listUrl4 ' style="width:300px"></upload-img>
							</el-form-item>
						</el-col>
						<el-col :span="14">

							<el-form-item label="运营人代表：">
								<el-input v-model="form.operateName" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="身份证号：">
								<el-input v-model="form.operateID" style="width:300px"></el-input>
							</el-form-item>
							<!--<el-form-item label="证件有效期：">
									<el-date-picker
										value-format="yyyy/MM/dd"
										format="yyyy/MM/dd"
										style="width:300px"
										v-model="value3"
										type="daterange"
										:disabled="disabled3"
										range-separator="至"
										start-placeholder="开始日期"
										end-placeholder="结束日期">
									</el-date-picker>
								   <el-checkbox style="margin-left:10px;" v-model="checked3" @change="changeState3">长期</el-checkbox>
							</el-form-item>-->
							<el-form-item label="证件有效期">
								<el-col :span="5">
									<el-date-picker  type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled" v-model="date5" style="width: 100%;"></el-date-picker>
								</el-col>
								<el-col class="line" style="margin-left:10px;" :span="1">至</el-col>
								<el-col :span="5">
									<el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy/MM/dd"  placeholder="选择日期" :disabled="disabled" v-model="date6" style="width: 100%;"></el-date-picker>
								</el-col>
								<el-col :span="4" style="margin-left:5px;">
									<el-checkbox v-model="checked3" @change="changeState3">长期</el-checkbox>
								</el-col>
                        	</el-form-item>
							<el-form-item label="手机号：" style="width:500px" prop="abbreviation">
								<el-input v-model="form.operatePhone" style="width:300px"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<div class="container" style="margin-top:20px">
                    <h3 style="margin-bottom: 20px">企业销售品种</h3>
                    <el-row class="demo-ruleForm1" v-for="(item, index) in muban" :key="index">
                        <el-col :span="5">
                            <el-form-item label="品种名称：">
                                <el-input v-model="muban[index].type" style="width:260px"></el-input>
                            </el-form-item>
                            <el-form-item label="当前报价：">
                                <el-input v-model="muban[index].price" style="width:260px"></el-input>
                            </el-form-item>
                            <el-form-item label="上市时间：">
                                <el-date-picker type="date" format="yyyy/MM/dd" value-format="yyyy-MM-dd" placeholder="选择日期"
                                    v-model="muban[index].time" style="width: 260px;"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="16" style="display: flex;">
                            <el-form-item label="品种图片：" style="width: 280px">
                                <el-upload :show-file-list="false" :action="action" multiple accept="image/jpeg,image/png"
                                    :headers="headers"
                                    :on-success="dynamicPicSuccess.bind(null, { 'index': index })" name="files" :limit="4">
                                    <i class="el-icon-plus avatar-uploader-icon dynamic"></i>
                                </el-upload>
                            </el-form-item>
							<div style="margin-left: 30px;"></div>
                            <img class="imgs_up" v-for="(item_s,index) in muban[index].img" :key="index" :src="showImg+item_s" />
                        </el-col>
                        <el-col :span="3">
                           <el-button type="danger" plain @click="deletes(item)">删除</el-button>
                        </el-col>
                    </el-row>
                    <div class="addForm" @click="addForm"><i class="el-icon-plus"></i>添加</div>
                </div>
                <div style="margin-top: 30px;margin-bottom: 10px;">企业图片</div>
                <el-form-item label-width="0">
                    <el-upload  :action="action" :show-file-list="false" :headers="headers"
                            :on-success="successFile" name="files" class="avatar-uploader">
                            <img v-if="ruleForm.coverImg" :src="showImg + ruleForm.coverImg" class="avatar_s">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <div style="margin-top: 30px;margin-bottom: 10px;">企业介绍</div>
                <el-form-item label-width="0">
                    <Toolbar style="border: 1px solid #DDDDDD;border-bottom: none;" :editor="editorRef"
                        :defaultConfig="editorConfig.toolbarConfig" :mode="mode" />
                    <Editor style="height: 400px;border-radius: 5px;border: 1px solid #DDDDDD;" v-model="ruleForm.introduce"
                        :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
                </el-form-item>
                 </div>
				<el-form-item class="footerFixed">
				    <el-button type="primary" @click="qy_save('form')">提交</el-button>
				    <el-button @click="backPage">返回</el-button>
				</el-form-item>
				</el-form>
            </div>
        </div>
    </div>
</template>

<script>
	import uploadImg from '../../../common/uploadImg';
   import {regionData,CodeToText} from 'element-china-area-data'
   import {goverment_save,control_lists} from "@/request/supervisionCenterApi"
   import { toolbarConfig, MENU_CONF } from '../compenyContral/wangeditors.js'
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    export default {
		components: {
		    uploadImg,Editor, Toolbar
		},

        data(){
            return{
				mode: 'default',
				editorRef: null,
				showImg: 'https://bbgy.cpzsyun.com:82/api/plant/file/show/',
                action: 'https://bbgy.cpzsyun.com:82/api/plant/file/upload',
				headers: {
                common: {
                    token: JSON.parse(window.sessionStorage.getItem("token"))
                }
                 },
				ruleForm: {
					content:"",
					introduce:"",
					coverImg:"",
					compType:"",
					fruitType:""

				},
				disabled:false,
				rules:{
					 abbreviation: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 area: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 name: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 creditCode: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 region: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 legalName: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 legalID: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 legalPhone: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 operateName: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 operateID: [{ required: true, message: '不能为空', trigger: 'blur' }],
					 operatePhone: [{ required: true, message: '不能为空', trigger: 'blur' }],
				},
				muban: [
					{
						type: "",
						price: "",
						time: "",
						img: []
					},
					{
						type: "",
						price: "",
						time: "",
						img: []
					}
               ],
			   editorConfig: {
                placeholder: '请输入内容...',
                //配置工具栏
                toolbarConfig: toolbarConfig,
                MENU_CONF: MENU_CONF,
               },
				lsname:'',
				logoImg:'',
				password:'',
				listUrl1:'',
				listUrl2:'',
				listUrl3:'',
				listUrl4:'',
				value3:'',
				disabled3:false,
				checked3:'',
				value2:'',
				disabled2:false,
				checked2:'',
				value1:'',
				disabled1:false,
				checked1:'',
                select2:'',
                select1:'',
                select:'',
                textarea2:'',
                imageUrl:'',
				options: regionData,
                form: {
					files:'',

					type:1
                },
				user:{
				    userName:'',
				    password:''
				},
				list:[{appId:''}],
				ls:[],
				date1: '', // 企业信息营业期限
				date2: '', // 企业信息营业期限
				date3: '', // 法人信息证件有效期
				date4: '', // 法人信息证件有效期
				date5: '', // 运营者信息证件有效期
				date6: '', // 运营者信息证件有效期
            }
        },
		mounted(){
		},
		methods: {
		   dynamicPicSuccess(obj, res, file) {
           this.muban[obj.index].img.push(res.data.fileName)
        },
        successFile(res, file){
			console.log(res)
            this.ruleForm.coverImg = res.data.fileName
		},
		handleCreated(editor) {
            this.editorRef = editor // 记录 editor 实例
        },
        addForm() {
            // console.log(this.muban)
            const circle = this.muban[0]; //取出数组中第一个对象
            if (circle) {
                const newObj = {};
                for (let key in circle) { //把第一个对象的属性都赋值给新对象newObj  然后每个属性的值都设置为空；
                    if(key=='img'){
						newObj[key] = [];
					}else{
						newObj[key] = '';
					}

                }
                this.muban.splice(this.muban.length, 0, newObj);
            }
        },
			imgPreview(file,fileList){
				// console.log(file)
				// var f = this.$compress.compressImg(file.raw)
				// console.log(f)
				let self = this
				let Orientation;
				let ndata;
				let reader = new FileReader();
					// 将图片2将转成 base64 格式
					reader.readAsDataURL(file.raw);
					// console.log(reader)
					// 读取成功后的回调
					reader.onloadend = function () {
					let result = this.result;
					let img = new Image();
					img.src = result;
				   img.onload = function () {
					let data = self.compress(img,Orientation);
					self.headerImage = data;
					ndata=  self.compress(img,Orientation);

					//BASE64转图片
					var arr = ndata.split(','), mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
					while(n--){
					u8arr[n] = bstr.charCodeAt(n);
					}
				   ndata=new File([u8arr],file.raw.name, {type:mime})
				//    console.log(ndata)
				   self.form.files = ndata
				   self.form.licenseImg = ndata.name
					// self.postImg(ndata);
					// console.log(self.form.licenseImg)
				}
			  }
			    this.logoImg =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
				// this.form.files = ndata
				// this.form.licenseImg = ndata.name
			    // let regex = /(.jpg|.gif|.png|.jpeg)$/;
			  //   if (regex.test(fileName.toLowerCase())) {
					// console.log
			  //       this.form.files = ndata.raw
			  //       this.form.licenseImg = ndata.name
			  //   } else {
			  //       this.$message.error('请选择图片文件');
			  //   }
			},

			compress(img,Orientation){
			      let canvas = document.createElement("canvas");
			      let ctx = canvas.getContext('2d');
			        //瓦片canvas
			      let tCanvas = document.createElement("canvas");
			      let tctx = tCanvas.getContext("2d");
			      let initSize = img.src.length;
			      let width = img.width;
			      let height = img.height;
			      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
			      let ratio;
			      if ((ratio = width * height / 40000000) > 1) {
			        console.log("大于400万像素")
			        ratio = Math.sqrt(ratio);
			        width /= ratio;
			        height /= ratio;
			      } else {
			        ratio = 1;
			      }
			      canvas.width = width;
			      canvas.height = height;
			  // 		铺底色
			      	ctx.fillStyle = "#fff";
			      ctx.fillRect(0, 0, canvas.width, canvas.height);
			      //如果图片像素大于100万则使用瓦片绘制
			      let count;
			      if ((count = width * height / 100000) > 1) {
			        // console.log("超过100W像素");
			        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
			  //            计算每块瓦片的宽和高
			        let nw = ~~(width / count);
			        let nh = ~~(height / count);
			        tCanvas.width = nw;
			        tCanvas.height = nh;
			        for (let i = 0; i < count; i++) {
			          for (let j = 0; j < count; j++) {
			            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
			            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
			          }
			        }
			      } else {
			        ctx.drawImage(img, 0, 0, width, height);
			      }
			      //修复ios上传图片的时候 被旋转的问题
			      if(Orientation != "" && Orientation != 1){
			        switch(Orientation){
			          case 6://需要顺时针（向左）90度旋转
			              this.rotateImg(img,'left',canvas);
			              break;
			          case 8://需要逆时针（向右）90度旋转
			              this.rotateImg(img,'right',canvas);
			              break;
			          case 3://需要180度旋转
			              this.rotateImg(img,'right',canvas);//转两次
			              this.rotateImg(img,'right',canvas);
			              break;
			        }
			      }
			      //进行最小压缩
			      let ndata = canvas.toDataURL('image/jpeg', 0.7);

			    //   console.log('压缩前：' + initSize);
			    //   console.log('压缩后：' + ndata.length);
				//   console.log("ndata:"+ndata)

			    //   console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
			    //   tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;


			      return ndata;
			},


			backPage(){
				this.$router.go(-1)
			},
			qy_save(form){

				this.$refs[form].validate((valid) => {
					if (valid) {
                        // console.log(1)
						// alert('submit!');
				  let mubandata  = JSON.parse(JSON.stringify(this.muban))
				   mubandata.forEach((v)=>{
                      v.img = v.img.join(';')
                    })
                this.ruleForm.content = JSON.stringify(mubandata)
				console.log(this.muban,this.ruleForm)
				this.form.versionsString = JSON.stringify(this.list)
				// console.log(r)
				// console.log(this.form.versionsString)
				this.form.parentId = this.list[0].parentCompanyId
				this.form.parentName = this.list[0].parentCompanyName
				if(this.area){
					this.form.area = this.area.join(",")
				}
				if(this.checked1 == true){
					this.form.term = "永久"
				}else{
					if(this.date1 == ""){

				    }else{
						this.form.term = this.date1 + "至" + this.date2
				    }
				}
				if(this.checked2 == true){
					this.form.legalTime = "永久"
				}else{
					if(this.date3 == ""){

					}else{
						this.form.legalTime = this.date3 + "至" + this.date4
				    }
				}
				if(this.checked3 == true){
					this.form.operateTime = "永久"
				}else{
					if(this.date5 == ""){

						}else{
							this.form.operateTime = this.date5 + "至" + this.date6
				    }
				}
				let formdata = new FormData()
				var imgurls1 = this.$refs.uploadChang1.fileList
				var arr1 = ""
				for(var i=0;i<imgurls1.length;i++){
					if(imgurls1[i].status != "success"){
						formdata.append("files",imgurls1[i].raw)
				    }
				    arr1 += imgurls1[i].name + ';'
				}
				var str1 = arr1.substr(0,arr1.length-1)
				this.form.legalImg = str1.substring(str1.lastIndexOf("/")+1)

				var imgurls2 = this.$refs.uploadChang2.fileList
				var arr2 = ""
				for(var i=0;i<imgurls2.length;i++){
					if(imgurls2[i].status != "success"){
						formdata.append("files",imgurls2[i].raw)
				    }
				    arr2 += imgurls2[i].name + ';'
				}
				var str2 = arr2.substr(0,arr2.length-1)
				this.form.legalIDImg = str2.substring(str2.lastIndexOf("/")+1)

				var imgurls3 = this.$refs.uploadChang3.fileList
				var arr3 = ""
				for(var i=0;i<imgurls3.length;i++){
					if(imgurls3[i].status != "success"){
						formdata.append("files",imgurls3[i].raw)
				    }
				    arr3 += imgurls3[i].name + ';'
				}
				var str3 = arr3.substr(0,arr3.length-1)
				this.form.operateImg = str3.substring(str3.lastIndexOf("/")+1)


				var imgurls4 = this.$refs.uploadChang4.fileList
				var arr4 = ""
				for(var i=0;i<imgurls4.length;i++){
					if(imgurls4[i].status != "success"){
						formdata.append("files",imgurls4[i].raw)
				    }
				    arr4 += imgurls4[i].name + ';'
				}
				var str4 = arr4.substr(0,arr4.length-1)
				this.form.operateIDImg = str4.substring(str4.lastIndexOf("/")+1)
				this.form.user = JSON.stringify(this.user)
				this.form.address = this.form.region
				this.form  = {...this.form,...this.ruleForm}
				console.log(this.form)
				for(var a in this.form){
					if(this.form[a] == null || this.form[a] == "null"){
						this.form[a] = ""
				        formdata.append(a,'')
				    }else{
						formdata.append(a,this.form[a])
				    }
				}
				this.area = ""
				goverment_save(formdata).then((res)=>{
					this.$notify({
						title: '操作成功',
					    message: '保存成功',
					    type: 'success'
					});
				    this.$router.go(-1)
				})
				} else {
					return false;
				}
			});
			},
			changeState1(){
				if(this.checked1 == false){
			        this.disabled1 = false
			    }else{
			        this.disabled1 = true
			    }
			},
			changeState2(){
				if(this.checked2 == false){
			        this.disabled2 = false
			    }else{
			        this.disabled2 = true
			    }
			},
			changeState3(){
				if(this.checked3 == false){
			        this.disabled3 = false
			    }else{
			        this.disabled3 = true
			    }
			},
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG) {
				this.$message.error('上传头像图片只能是 JPG 格式!');
				}
				if (!isLt2M) {
				this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isJPG && isLt2M;
			}
		},



    }
</script>

<style scoped>
    .crumbs{
        width:95%;
        margin:0 auto;
        margin-top: 30px;
        background: #ffffff;
    }
    .container{
        padding:10px;
    }
    .lu{
        width: 8px;
        height: 16px;
        background: greenyellow;
    }
    .hnk{
        display:inline-block;
    }
    .jgxx{
        margin-left:10px ;
        font-weight:600;
        font-size: 15px;
    }
    .jgcontainer{
        font-weight: 400;
    }
    .con{
        width:40%;
        padding: 20px;
        font-size: 14px;
        margin-left: 20px;
    }
    .handle-input {
        width: 300px;
        display: inline-block;
        /* margin-left: 30px; */
    }
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .demo-ruleForm1 {
    border: 1px solid #DDDDDD;
    padding-top: 10px;
    margin-bottom: 10px;
}




</style>
<style>
.addForm {
    width: 100px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin: 0 auto;
    height: 40px;
    background-color: #409EFF;
    line-height: 40px;
    color: #ffffff;
    border: 1px solid #DDDDDD;
    margin-top: -11px;
    cursor: pointer;
    text-align: center;

}
.el-upload--text {
    line-height: 170px;
}
.imgs_up{
    margin-left: 10px;
    width: 180px;
    height: 180px;
	border-radius: 5px;
}
	.avatar_s{
		width: 180px;
        height: 180px;
		border-radius: 5px;
		line-height: 180px;
	}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>
